<template>
    <div class="newOrder">
      <el-row :gutter="20">
        <el-col :span="6"><div class="grid-content bg-purple">
          <el-input v-model="input" placeholder="请输入内容">
            <template slot="prepend">专业</template>
          </el-input>
        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">
          <el-input v-model="input" placeholder="请输入内容">
            <template slot="prepend">年级</template>
          </el-input>
        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">
          <el-input v-model="input" placeholder="请输入内容">
            <template slot="prepend">学年</template>
          </el-input>
        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">
          <el-button type="primary">主要按钮</el-button>
        </div></el-col>
      </el-row>

      <div class="new-order">
        <div>这里显示新增的订单，需要预填写上次的订单吗？</div>
        <hr>
        <el-table
          :data="newOrderTable"
          border
          style="width : 100%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="press"
            label="出版社"
            width="180">
          </el-table-column>
          <el-table-column
            prop="MaterialName"
            label="教材名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="author"
            label="作者"
            width="180">
          </el-table-column>
          <el-table-column
            prop="price"
            label="单价"
            width="180">
          </el-table-column>
          <el-table-column
            prop="orderId"
            label="本季征订号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="courseName"
            label="课程名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="userClass"
            label="使用专业班级"
            width="180">
          </el-table-column>
          <el-table-column
            prop="orderNum"
            label="预定数量"
            width="180">
          </el-table-column>

          <el-table-column
            prop="remarks"
            label="备注">
          </el-table-column>
        </el-table>


      </div>

      <div class="last-order">
        <div class="overflow-clear">
          <div class="float-right show-history">
            <span>点击<b>显示/隐藏</b>上一个历史订单</span>
            <el-switch
              v-model="tableSwitch"
              on-text=""
              off-text="">
            </el-switch>
          </div>
        </div>
        <el-table
          v-show="tableSwitch"
          :data="lastOrderTable"
          border
          style="width : 100%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="press"
            label="出版社"
            width="180">
          </el-table-column>
          <el-table-column
            prop="MaterialName"
            label="教材名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="author"
            label="作者"
            width="180">
          </el-table-column>
          <el-table-column
            prop="price"
            label="单价"
            width="180">
          </el-table-column>
          <el-table-column
            prop="orderId"
            label="本季征订号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="courseName"
            label="课程名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="userClass"
            label="使用专业班级"
            width="180">
          </el-table-column>
          <el-table-column
            prop="orderNum"
            label="预定数量"
            width="180">
          </el-table-column>

          <el-table-column
            prop="remarks"
            label="备注">
          </el-table-column>
        </el-table>
      </div>

      <el-button type="primary">确认</el-button>
      <el-button type="primary">提交</el-button>
      <el-button type="primary">取消</el-button>
    </div>
</template>
<style>
  .show-history{
    height: 46px;
    line-height: 46px;
  }
  .new-order , .last-order{
    margin-top:4px;
    margin-bottom:4px;
  }
</style>
<script>
    export default{
        name : 'newOrder',
        data(){
            return{
                tableSwitch : false,
                lastOrderTable : [],
                newOrderTable : [],
            }
        },
        components:{
        },
        mounted:function(){
            this.$nextTick(function(){
                this.queryRes();
            })
        },
        methods: {
            queryRes:function(){
               this.$http.get('/static/data.json',[]).then(response => {
                  for (const element of response.body.orderTable){
                      this.lastOrderTable.push(element);
                      //new order table
                      this.newOrderTable.push(element);
                  }
              }, response => {
                 console.log('文件获取失败');
              });
            },
        }
    }
</script>
